<template>
  <div>
       <!-- :inline="true" 表单一行显示 -->
    <el-form ref="searchForm" :inline="true" style="margin-top: 20px">
      <!-- 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效 -->
     <el-form-item>
        <el-input
          v-model="searchMap.name"
          placeholder="供应商名字"
          style="width: 200px"
        ></el-input>
      </el-form-item>
     
      <el-form-item>
        <el-input
          v-model="searchMap.linkman"
          placeholder="联系人"
          style="width: 200px"
        ></el-input>
      </el-form-item>

       <el-form-item>
        <el-input
          v-model="searchMap.mobile"
          placeholder="联系电话"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      
      
      

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>





    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="linkman" label="联系人">
      </el-table-column>

      <el-table-column prop="mobile" label="手机号码"> </el-table-column>
      <el-table-column prop="remark" label="备注" width="250">
      </el-table-column>
     

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>



     <!-- 显示分页   layout="total, sizes, prev, pager, next, jumper"-->
    <el-pagination
      class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5, 10, 20, 50, 100, 200, 300, 400]"
      :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>



     <app-add
      :dialogVisible="dialogVisible"
      :pojo="pojo"
      :closeDialog="closeDialog"
    ></app-add>
  </div>
</template>

<script>
import supplierApi from "@/api/supplier";
import AppAdd from "./AppAdd";
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      searchMap: {},
      list: [],
      total: 0,

       dialogVisible: false,
       pojo: {}, // 提交的数据
    }
  },

  components: {AppAdd},

  methods: {
     async fetchData() {
      const { data } = await supplierApi.search(
        this.currentPage,
        this.pageSize,
        this.searchMap
      );
      this.list = data.rows;
      this.total = data.total;
    },

    // 每页显示条数改变调用方法
    handleSizeChange(val) {
      //alert("111111111111111")
      this.currentPage = 1;
      this.pageSize = val;
      this.fetchData();
    },

    handleCurrentChange(val) {
      //alert("222222222222222")
      this.currentPage = val;
      this.fetchData();
    },

    search() {
      this.currentPage = 1;
      this.fetchData();
    },

    resetForm() {
      this.searchMap = {};
    },

     handleAdd() {
      this.dialogVisible = true;
    },

    async handleEdit(id) {
       var resp = await supplierApi.getById(id)
                this.pojo = resp.data
                     this.dialogVisible = true
    },

      closeDialog() {
        this.fetchData();
      this.dialogVisible = false;
      this.pojo= {}
    },

    handleDelete(id){
       this.$confirm('确认删除这条记录吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
            }).then(() => {
                // 确认
                supplierApi.deleteById(id).then(resp => {
                    this.$message({
                        message: resp.message,
                        type:  'success'
                    })
                        // 删除成功，刷新列表数据
                        this.fetchData()
                })
            })
    }


  },

  created() {
    this.fetchData();
  },
}
</script>

<style scoped>
.fenye {
  position: fixed;
  bottom: 0px;
  left: 40%;
}
</style>